<template>
  <view class="container">
    <view class="title">数字打卡</view>
    
    <!-- 四位数字输入框 -->
    <view class="code-container">
      <view 
        class="code-box" 
        v-for="(item, index) in codeList" 
        :key="index"
      >
        {{ item || '-' }}
      </view>
    </view>
    
    <!-- 数字键盘 -->
    <view class="keyboard">
      <view class="keyboard-row" v-for="(row, rowIndex) in keyboardLayout" :key="rowIndex">
        <view 
          class="keyboard-key" 
          v-for="(key, keyIndex) in row" 
          :key="keyIndex"
          @click="handleKeyPress(key)"
        >
          {{ key }}
        </view>
      </view>
      <view class="keyboard-row">
        <view class="keyboard-key empty"></view>
        <view class="keyboard-key" @click="handleKeyPress(0)">0</view>
        <view class="keyboard-key delete" @click="handleDelete">
          <uni-icon type="delete" size="20">删除</uni-icon>
        </view>
      </view>
    </view>
    
    <!-- 提交按钮 -->
    <view class="submit-btn" @click="submitCode">
      提交
    </view>
  </view>
</template>

<script setup>
import { useRoute } from 'vue-router';
import { onShow } from '@dcloudio/uni-app'
import { ref } from 'vue'
import { get } from '../../http/request';
import { numberSignInAPI } from '../../http/card.js';

const route = useRoute();
const activityId = route.query.id;
const status = Number(route.query.status);

console.log('活动ID:', activityId);
console.log('状态:', status);

// 四位数字数组
const codeList = ref(['', '', '', '']);
// 当前输入位置
const currentIndex = ref(0);

// 键盘布局
const keyboardLayout = ref([
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9]
]);

// 处理数字键点击
const handleKeyPress = (number) => {
  if (currentIndex.value < 4) {
    codeList.value[currentIndex.value] = number.toString();
    currentIndex.value++;
  }
}

// 处理删除
const handleDelete = () => {
  if (currentIndex.value > 0) {
    currentIndex.value--;
    codeList.value[currentIndex.value] = '';
  }
}

// 提交数字密码
const submitCode = () => {
  // 检查是否填满四位数字
  if (currentIndex.value < 4) {
    uni.showToast({
      title: '请输入完整四位数字',
      icon: 'none'
    });
    return;
  }
  
  // 组合完整密码
  const fullCode = codeList.value.join('');
  
  console.log('提交的四位数字:', fullCode);
  
  numberSignInAPI(activityId,fullCode).then(data => {
    console.log(data)
      uni.showToast({
        title: '打卡成功',
        icon: 'success'
      });
      setTimeout(() => {
        uni.navigateBack();
      }, 1500);
    
  })
}
</script>

<style>
.container {
  padding: 40rpx 30rpx;
}

.title {
  text-align: center;
  font-size: 36rpx;
  font-weight: bold;
  margin-bottom: 60rpx;
}

.code-container {
  display: flex;
  justify-content: space-between;
  margin-bottom: 80rpx;
}

.code-box {
  width: 140rpx;
  height: 140rpx;
  border: 2rpx solid #e5e5e5;
  border-radius: 12rpx;
  font-size: 48rpx;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
}

.keyboard {
  margin-top: 40rpx;
}

.keyboard-row {
  display: flex;
  justify-content: space-around;
  margin-bottom: 30rpx;
}

.keyboard-key {
  width: 180rpx;
  height: 180rpx;
  background-color: #f5f5f5;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48rpx;
}

.keyboard-key.empty {
  background-color: transparent;
}

.keyboard-key.delete {
  background-color: #f5f5f5;
}

.submit-btn {
  margin-top: 60rpx;
  background-color: #007aff;
  color: white;
  text-align: center;
  padding: 24rpx 0;
  border-radius: 12rpx;
  font-size: 36rpx;
}
</style>